<template>
<div class="order_info">
  <div class="main wh-full">
    <el-container class="main-container">
      <el-main>
        <div class="container2 cc_main">
          <!-- 标题栏 -->
          <div class="top_titlebox flex flex-between">
            <div class="top_title flex">
              <h3 class="font-24 font-bold">订单详情</h3>
              <p class="font-12 pright"></p>
            </div>
          </div>
					<!-- main -->
					<div class="main_box flex">
          <!-- 内容部分 -->
          <div class="trad_box  wb80"  >
						<div class="order_top bor_bott" >
							<p>订单：#{{orderInfo.autoid}}  <span class="m-left-15">创建时间：{{orderInfo.writedate}}</span></p>
							<h3 class="font-24">{{orderInfo.buymember}}向{{orderInfo.sellmember}} <span v-text="c2cTradeInfo.type=='sell'?'购买':'出售'"></span> {{orderInfo.number}} {{orderInfo.coin}}</h3>
							<p>交易单价：{{orderInfo.price}} CNY/ {{orderInfo.coin}}</p>
							<p>交易总价：{{orderInfo.zj}} CNY <span class="color-danger m-left-10"> [请尽快完成收款/付款] </span></p>
						</div>
            <div class="buy_info bor_bott pad-15" v-if="c2cTradeInfo.type=='buy'">
						  <p class="m-top-10">支付方式</p>
							<p class="m-top-10"><i class="el-icon-warning color-danger"></i><span class="m-left-10">你必须用真实有效的账户向以下账号自行转账</span></p>
								<!-- <el-radio-group v-model="radio2">
								<div class="m-top-10">
									<el-radio :label="3"><el-tag type="warning" size="small" class="w60">银行卡</el-tag>
                  </el-radio>
								</div>
								<div class="m-top-10">
									<el-radio :label="4"><el-tag type="" size="small" class="w60">支付宝</el-tag><span class="m-left-10"></span></el-radio>
								</div>
								<div class="m-top-10">
									<el-radio :label="5"><el-tag type="success" size="small" class="w60">微 信</el-tag><span class="m-left-10"></span></el-radio>
								</div>
							</el-radio-group> -->
              <div class="payinfobox m-top-15" >
                <div class="flex">
                      <span class="m-left-10">银行卡收款方式信息: </span>
                      <span class="m-left-10">{{orderInfo.bankcard}}</span> <span class="m-left-10">{{orderInfo.khyh}} </span>
                      <span class="m-left-10"> {{orderInfo.khzh}} </span> <span class="m-left-10"> {{orderInfo.bankcard}} </span>
                </div>
                <div class="flex">
                      <span class="m-left-10">微信收款方式信息: </span>
                      <p class="mf15">{{orderInfo.wx}}</p>
                      <p class="seeSkm" @click="seeSkm(orderInfo,1)">点击查看收款码</p>
                </div>
                <div class="flex">
                      <span class="m-left-10">支付宝收款方式信息: </span>
                      <p class="mf15">{{orderInfo.zfb}}</p>
                      <p class="seeSkm" @click="seeSkm(orderInfo,2)">点击查看收款码</p>
                </div>
              </div>
						</div>
						<!-- <div class="servicemon bor_bott pad-15">
							<h3 class="m-top-10">增值保证服务</h3>
							<div class="m-top-15">
								<el-checkbox v-model="checked">法律服务0.1HT (可用等值其他资产支付)</el-checkbox>
							</div>
						</div> -->
						<div class="server_pay flex-v-center bor_bott ">
							<div class="font-20 flex flex-center ordtype"> 
                {{ordeStateCheck}}
                <!-- <p v-if="!ordeStateCheck">请于<span>14分03秒</span>内向小茗同学支付<span>500CNY</span>,</p> -->
                付款参考号：<el-tag type="danger">{{orderInfo.bz||'-----'}}</el-tag></div>
              <div class="order_btn" v-if="orderInfo.state=='witrealy'||orderInfo.state=='waitpay'">
                <div class="flex">
                  <el-button type="warning" class="w120" :disabled="orderInfo.state=='witrealy'" v-if="c2cTradeInfo.type=='buy'" @click="sendmoneyok(orderInfo)">我已打款</el-button>
                  <el-button type="warning" class="w120" :disabled="orderInfo.state=='waitpay'" v-if="c2cTradeInfo.type=='sell'" @click="getmoneyok(orderInfo)">确认收款</el-button>
                  <el-button type="danger" class="w120" @click="questc2corder(orderInfo)">投诉订单</el-button>
                  <!-- <el-button type="warning" class="w120" v-if="orderInfo.state=='success'">已完成</el-button>
                  <el-button type="warning" class="w120" v-if="orderInfo.state=='unusual'">订单异常</el-button>
                  <el-button type="warning" class="w120" v-if="orderInfo.state=='cancel'">已取消</el-button> -->
                  <p class="line-h40">对方已缴纳平台广告单保证金</p> 
                </div>
                <div class="del_ord" v-if="orderInfo.state=='waitpay'">
                  <p v-if="orderInfo.state=='waitpay'">【按对方收款方式付款后点击我已打款按钮】</p>
                </div>
								<div class="clearorder" v-if="nodata===3">
                  <el-button type="warning" class="w120" >已取消</el-button>
                </div>
              </div>
              
						</div>
          </div>
          <!-- 右侧聊天 -->
					<div class="right_chat wb20 modal-content">
            <div class="chat-box">
						<div class="chat_top">
							<div class="flex flex-v-center">
								<p class="witimg">{{onename||'--'}}</p><p class="m-left-10">{{orderInfo.sellmember}}</p>
							</div>
							<div class="m-top-10">
								<!-- <p><span>近30日成单:</span><span>500</span></p> -->
							</div>
						</div>
						<div class="chat_cen chat_scrrol">
							<article>
                <div v-html="orderInfo.info">

                </div>
              </article>
						</div>
						<div class="chat_post clearfix flex" >
							<!-- <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  resize="none"
                  v-model="textarea2">
              </el-input>
              <div class="enter_msg"> 
                <el-button type="primary">发送</el-button>
              </div> -->
						</div>
            </div> 
					</div>
					</div>
					<!-- main end -->
					<!-- 常见问题 -->
					<div class="day_ask pad-15 b-top">
						<div class="top"> 
							<h3 class="font-bold">常见问题</h3> 
              <ul class="qslist">
                <li>
                  <p class="font-16 font-bold">Q:给卖家付款安全吗？</p>
                  <p class="p2">当你进入交易时，卖家的数字资产会被锁定在平台的钱包中，因此不必担心给卖家付款。如果卖家在您付款5分钟后还未放行数字资产，点击“申诉’按钮，我们的客服团队将会帮助您。</p>
                </li>
                <li>
                  <p class="font-16 font-bold">Q:给卖家付款安全吗？</p>
                  <p class="p2">若您已完成付款，请务必点击“已付款’按钮，卖家确认收款后，您就会收到数字资产。</p>
                </li>
                <li>
                  <p class="font-16 font-bold">Q:转款注意事项</p>
                  <p class="p2">1、在转账过程中请勿备注类似BTC、USDT、星空交易等信息，防止造成您的汇款被拦截、银行卡被冻结等问题，因此到账延迟，卖方可选择拒绝成交。</p>
									<p class="p2">2、若交易金额大于50,000 CNY，法定假日或工作日17:00点以后汇款到银行卡可能造成到账不及时，请分批支付保证及时到账，若未及时到账，卖家有权拒绝成交。</p>
                </li>
              </ul>
						</div>
					</div>
        </div>
      </el-main>
    </el-container>
    <!-- 弹出收款码 -->
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisibleimg"
      width="30%"
    >
      <div class="proimg">
        <img :src="proimg" alt="" srcset="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleimg = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleimg = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
      c2cTradeInfo:JSON.parse(localStorage.getItem('c2cTradeInfo')),
      showDialog: false,
      showLoading: false,
      canTrade: false,
      bindState: null,
      myOrderList: [],
      allOrderList: [],
      bankInfo: "",
      orderStatus: 0,
      myBalance: 0,

      //随机生成的备注字符串
      noteStr: "",
      coinlist:[1,2,3,1,4,5,6,7],
      activeName: 'first',
      tableData: [],
      value5: ['测试',],
      options:[],
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
				},
			radio2:'',
			checked: true,
      activeName: '1',
      textarea2:'',
      orderInfo:{},
      autoinid:'',
      ordeStateCheck:'',
      dialogVisibleimg:false,
      proimg:'',
      nodata:2,
      onename:'--'
    };
  },
    created(){
    if (this.$route.query.autoinid) {
      this.autoinid=this.$route.query.autoinid;
      this.getmaincoin(this.autoinid);
    }else{
      return
    }
    

  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {
    // 获取聊天记录 订单详情
    getmaincoin() {
      this.request(this.api.getorderinfo,{autoid:this.autoinid}).then(res => {
        if (res.code == "0"&&res.data.length>0) {
          this.orderInfo=res.data[0];
          this.onename=res.data[0].sellmember.slice(0,1);
          if(this.orderInfo.state=='waitpay'){
            this.ordeStateCheck='待打款';
          }else if(this.orderInfo.state=='witrealy'){
            // 待收款
            this.ordeStateCheck='待收款';
          }else if(this.orderInfo.state=='success'){
            this.ordeStateCheck='已完成';
          }else if(this.orderInfo.state=='unusual'){
            this.ordeStateCheck='订单异常';
          }else if(this.orderInfo.state=='cancel'){
            this.ordeStateCheck='已取消';
          }
          this.nodata=2;
        }else{
          console.log(1111);
          this.nodata=3;
          return
        }
      });
    },
    seeSkm(orderinfo){
      console.log(orderinfo);
      
    },
    // 生成随机备注信息
    getNote() {
      let str = "";
      for (let i = 0; i < 6; i++) {
        str += this.Util.randomNum(0, 9);
      }
      this.noteStr = str;
    },
    beforeTrade() {
      if (!this.userModel.isLogin) {
        this.errMsg("label120" || "请登录后操作");
        return false;
      }
      if (!this.checkTradePassword()) {
        return false;
      }
      return true;
    },
    seeSkm(payData,type){
      console.log(payData);
      this.dialogVisibleimg=true;
      if(type==1){
        this.proimg=payData.wximg;
      }else if(type==2){
        this.proimg=payData.zfbimg;
      }
    },
    // 待打款
    sendmoneyok(orderInfo){
      this.autoid=orderInfo.autoid;
      this.request(this.api.sendmoneyok,{autoid:this.autoinid}).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          return this.getmaincoin();
        }else{
          this.errMsg(res.msg);
          return this.getmaincoin();
        }
      });
    },
    getmoneyok(orderInfo){
      this.autoid=orderInfo.autoid;
      this.request(this.api.getmoneyok,{autoid:this.autoinid}).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          return this.getmaincoin();
        }else{
          this.errMsg(res.msg);
          return this.getmaincoin();
        }
      });
    },

    questc2corder(orderInfo){
      this.autoid=orderInfo.autoid;
      this.request(this.api.questc2corder,{autoid:this.autoinid}).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          return this.getmaincoin();
        }else{
          this.errMsg(res.msg);
          return this.getmaincoin();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding: 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.container2 {
  min-height: calc(100% - 294px);
  padding: 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  h3{height: 24px;line-height: 24px;padding-bottom: 5px;}
  .pright{line-height: 24px;margin-left: 12px;}
}
.main-container{min-height: 80vh;}
// 内容部分
.main_cont{margin-top: 30px;}
// 订单详情
.trad_box{color: #333333;}
.w60{width: 60px; }
.user_pay{border-bottom: 1px dashed #eeeeee;}
.buy_info{
	.el-radio{color: #333333;}
}

.line-h40{line-height: 40px;margin-left: 20px;}
.order_top {padding: 20px 0;
	p{line-height: 24px}
}
.pad-15{padding: 15px 0;}
.w120{width: 200px;}
.wb80{width: 80%;}
// 常见问题
.day_ask{
	color: #333333;margin-top:15px;
	h3{line-height: 24px;}
	p{line-height: 20px;}
}
.bor_bott{border-top: 1px solid #eeeeee;}
.b-top{border-top: 1px solid #eeeeee;}
// 聊天
.right_chat{
  // border:1px solid #eeeeee;
  margin-left: 10px;width: 450px;color: #333333;margin-left: 20px;
  .el-textarea__inner {border:none;}
  .enter_msg{float: right;margin: 5px;}
  .chat_top{padding: 15px 20px;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;}
  .chat_post{height: 60px;border-bottom: 1px solid #eeeeee;border-right: 1px solid #eeeeee;padding-top: 10px;border-left: 1px solid #eeeeee;}
}
.witimg{width: 45px;height: 45px;background: #60b8d2;color: #333333;line-height: 45px;text-align: center;border-radius: 50%}

.chat_cen{height: 336px;border-bottom: 1px solid #eeeeee;}

.qslist{
  p{line-height: 24px;color: #818181;}
}
// article 聊天框
.modal-content {
  .chat_scrrol{
    padding: 8px 24px 16px;
    height: 402px;
    overflow-x: hidden;
    overflow-y: auto;
    border:1px solid #eeeeee;
  }
}
.modal-content .chat-box .chat-content-inner {
    padding: 10px;
    background-color: #f2f6fa;
    max-width: 240px;
    white-space: normal;
    word-break: normal;
    word-wrap: break-word;
    border-radius: 4px;
    position: relative;
    line-height: 18px;
}
.avatar-container {
    height: 32px;
    width: 32px;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
    position: relative;
}
.avatar-container.one {
    background: #8f5aad;
}
.avatar-container .name {
    font-size: 14px;
    color: #fff;
    font-style: normal;
}
// ---
.modal-content .chat-box .self-message {
    display: flex;
    flex-direction: row-reverse;
}
.message-y-space {
    margin-bottom: 26px;
}
.avatar-container.eight {
    background: #7692ab;
}
.avatar-container {
    height: 32px;
    width: 32px;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
    position: relative;
}
.avatar-container .name {
    font-size: 14px;
    color: #fff;
    font-style: normal;
}
.message-y-space {
    margin-bottom: 26px;
}
.word-break {
    word-break: break-all;
}
.font-gray {
    color: #9aa5b5;
}
// 聊天end
.server_pay {
  h3{padding: 20px 0;}
  .order_btn{
    margin-top: 0px;background: #eeeeee;padding: 15px;
    .del_ord{margin-left: 30px;margin-top: 30px;}
  }
}
.payinfobox{
  .flex{
    padding: 10px 0;
    .mf15{margin-left: 15px;}
  }
  .seeSkm{margin-left: 15px;color: #60b8d2;cursor: pointer;text-decoration:underline}
}
.ordtype{padding: 15px 0;align-items: center;}
.proimg{
  img{display:block;margin:0 auto;width: 80%;max-width: 400px;}
}
</style>
